<template>
  <el-container>
    <el-main>
      <el-button type="primary" @click="showDialogVisible = true"
        >查询学籍信息</el-button
      >
      <el-table :data="UserList" :header-cell-style="tableHeaderColor">
        <el-table-column prop="sno" label="学号"></el-table-column>
        <el-table-column prop="sname" label="姓名"></el-table-column>
        <el-table-column prop="ssex" label="性别"></el-table-column>
        <el-table-column prop="sage" label="年龄"></el-table-column>
        <el-table-column prop="ses" label="学制"></el-table-column>
        <el-table-column prop="slocation" label="地区"></el-table-column>
        <el-table-column prop="spo" label="政治面貌"></el-table-column>
        <el-table-column prop="snation" label="民族"></el-table-column>
        <el-table-column prop="srp" label="奖惩记录"></el-table-column>
        <el-table-column prop="sstm" label="休复转退标记"></el-table-column>
        <el-table-column prop="smajor" label="所在专业"></el-table-column>
        <el-table-column prop="syear" label="年级"> </el-table-column>
        <el-table-column prop="cno" label="课号"> </el-table-column>
        <el-table-column prop="cname" label="课名"></el-table-column>
        <el-table-column prop="grade" label="成绩"> </el-table-column>
      </el-table>

      <el-dialog
        title="查询信息"
        :visible.sync="showDialogVisible"
        width="50%"
        @close="showDialogClosed"
      >
        <el-form :model="query" label-width="90px" ref="showUserRef">
          <el-form-item label="学号" prop="sno">
            <el-input v-model="query.sno"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="showStudent(query.sno)"
            >确定</el-button
          >
          <el-button type="primary" @click="showDialogVisible = false"
            >取消</el-button
          >
        </span>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
export default {
  // created() {
  //   this.getUserList();
  // },
  data() {
    return {
      query: {
        sno: "",
        sname: "",
        ssex: "",
        ses: "",
        slocation: "",
        sage: "",
        spo: "",
        snation: "",
        srp: "",
        sstm: "",
        smajor: "",
        syear: "",
        cno: "",
        cname: "",
        grade: ""
      },
      UserList: [],
      showDialogVisible: false
    }
  },
  methods: {
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return 'background-color:lightblue;color:#fff;font-wight:500;font-size:20px;text-align:center'
    },
    // async getUserList() {
    //   this.$axios.post("http://localhost:8081/showStudent", this.query).then(res => {
    //     console.log(res.data);
    //     this.UserList = res.data;
    //   });
    // },
    showDialogClosed() {
      this.$refs.showUserRef.resetFields();
    },
    async showStudent(sno) {
      this.$axios.post("http://localhost:8081/showStudent?sno=" + query.sno).then(res => {
        if (res != "success") {
          this.showStudentVisible = false;
          return this.$message.success("操作成功");
        }
        this.$message.error("操作失败");
      });
    }
  }
};
</script>

<style scoped>
</style>